@extends('User.header')
@section('cssStyle')
    <link rel="stylesheet" href="{{asset('/css/home.css')}}">
    <link rel="stylesheet" href="{{asset('/css/log.css')}}">
@endsection
@section('content')
    <div class="header">
        @include('User.Tool.error')
        <ul class="nav nav-pills">
            <li id="shouye"><a href="{{url('/homePage')}}">首页</a></li>
            <li id="yonghuguanli"  class="active"><a href="{{url('/home/user/getList')}}">用户管理</a></li>
            <li id="shebeiguanli"><a href="#">设备管理</a></li>
            <li id="caozuorizhi"><a href="{{url('/home/log/getListView')}}">操作日志</a></li>
        </ul>
    </div>
    <div>
        <div clas="btn">
            <button type="submit" class="nomarl_btn">权限管理</button>
            <button type="submit" class="nomarl_btn">角色管理</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>ID</th>
                <th>name</th>
                <th>email</th>
                <th style="width: 70%">操作</th>
            </tr>
            </thead>
            <tbody id="userInfo">
            </tbody>
        </table>
    </div>
    <div class="pagination">
        <a  href="#">«</a>
        <a class="active-color" href="#">1</a>
    </div>


@endsection

@section('scriptStyle')
    <script type="text/javascript">
        $(function () {
            var pageSize = 10;
            var pageNum = 1;

            $.ajax({
                url:'http://192.168.1.134/home/user/list?pageSize='+pageSize+'&pageNum='+pageNum,
                type:'get',
                async:false,
                dataType:'json',
                success:function (data) {
                    var t = data.data.count/pageSize;
                    t = Math.ceil(t);
                    for(var j = 2; j <= t; j++)
                    {
                        $('.pagination').append('<a href="#">'+j+'</a>');
                    }
                    $('.pagination').append('<a href="#">»</a>');
                    /*绑定点击事件*/
                    $(".pagination a").click(function(){
                        $(this).siblings("a").removeClass("active-color");//点击后移除当前所有li的样式
                        $(this).addClass("active-color");//移除样式后，给当前点击的li添加样式
                    })

                    $(".pagination a").click(function(){
                        pageNum =$('.active-color').html();
                        if(isNaN(pageNum))
                        {
                            alert('没有数据啦！');
                        }else{
                            $('#userInfo').html('');
                            getData();//点击分页时调用
                        }
                    });
                }
            });

            function getData(){
                $.ajax({
                    url:'http://192.168.1.134/home/user/list?pageSize='+pageSize+'&pageNum='+pageNum,
                    type:'get',
                    async:true,
                    dataType:'json',
                    success:function (data) {
                        for(var i=0;i<data.data.data.length;i++)
                        {
                            var ids = data.data.data[i].id;
                            var str = '<tr><td>'+data.data.data[i].id+'</td><td>'+data.data.data[i].name+'</td><td>'+data.data.data[i].email+
                                "</td><td><a class='nomarl_btn' href='{\{url(\"/user/link\"+ids+\"/update\")}}'>修改</a><a class='nomarl_btn' href='javascription:;' onclick='deleteUser()'>删除</a></td></tr>"
                            $('#userInfo').append(str)
                        }
                    }
                });
            };
            getData();//一进页面时调用

            function deleteUser(){

            }
        });

    </script>
@endsection

